<template>
  <div class="home">
    <div class="banner">
      <Carousel autoplay v-model="value2" loop style="height:300px;">
        <CarouselItem>
          <div class="demo-carousel">
            <img
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555391238285&di=d59ba2a5b3b0a1607067ff8554f68065&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01abcf5a1689b8a8012051873f5171.jpg%401280w_1l_2o_100sh.jpg"
              alt
            >
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555391453130&di=395451c14cd885d91e0e5c0608b17d00&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0180eb5a1689bea8012051873a7a6d.jpg%401280w_1l_2o_100sh.jpg"
              alt
            >
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555391630042&di=b4ae78a76f9cb65214e84ca9f8f59903&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014c7e5541af5b000001a64b0768b2.jpg"
              alt
            >
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555391544516&di=b269f02d98eb3f9b614bcbcf198ef3ea&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0191345543db6d0000019ae974a488.jpg%402o.jpg"
              alt
            >
          </div>
        </CarouselItem>
      </Carousel>
    </div>
    <div class="container">
      <div class="inner">
        <div class="main">
          <div class="module mod-destination" id="china">
            <div class="hd">
              <span class="title">国内城市</span>
              <span class="subtitle">Home City</span>
            </div>
            <div class="bd">
              <ul>
                <!-- <router-link to="/home/chinaDetail" target="_self" class="J_blocklink big" tag="li">
                  <div class="pic">
                    <a>
                      <img src="../assets/images/xia.jpeg" alt="厦门" width="100%">
                    </a>
                  </div>
                  <div class="text">
                    <div class="cover"></div>
                    <p>
                      <span class="title">厦门</span>
                      <span class="english">Xiamen</span>
                      <span class="subtitle">在风姿绰约的海上花园漫步， 聆听鼓浪屿的天籁， 骑行在沿海环岛， 感受最美校园</span>
                    </p>
                  </div>
                </router-link>-->

                <li
                  class="J_blocklink"
                  v-for="item in chinaList"
                  :key="item.sceneryId"
                  @click="getDetail(item.sceneryId)"
                >
                  <div class="pic">
                    <a>
                      <img
                        :src="item.sceneryCover"
                        :alt="item.sceneryCity"
                        width="height:258px;100%"
                      >
                    </a>
                  </div>
                  <div class="text">
                    <div class="cover"></div>
                    <p>
                      <span class="title">{{item.sceneryCity}}</span>
                      <span class="english">Beijing</span>
                      <span class="subtitle">{{item.sceneryTitle}}</span>
                    </p>
                  </div>
                </li>
                <!-- <li class="J_blocklink">
                  <div class="pic">
                    <a href="http://www.liantu.cn/daoyou/wuhan/" target="_blank">
                      <img src="../assets/images/wu.jpeg" alt="武汉" width="100%">
                    </a>
                  </div>
                  <div class="text">
                    <div class="cover"></div>
                    <p>
                      <span class="title">武汉</span>
                      <span class="english">Wuhan</span>
                      <span class="subtitle">武大的樱花烂漫、黄鹤楼的千古绝唱、户部港的繁华溢彰、热干面的乡情弥漫</span>
                    </p>
                  </div>
                </li>
                <li class="J_blocklink">
                  <div class="pic">
                    <a href="http://www.liantu.cn/daoyou/zhangjiajie/" target="_blank">
                      <img src="../assets/images/zhang.jpeg" alt="张家界" width="100%">
                    </a>
                  </div>
                  <div class="text">
                    <div class="cover"></div>
                    <p>
                      <span class="title">张家界</span>
                      <span class="english">Zhangjiajie</span>
                      <span class="subtitle">三千奇峰 秀水八百</span>
                    </p>
                  </div>
                </li>
                <li class="J_blocklink">
                  <div class="pic">
                    <a href="http://www.liantu.cn/daoyou/guilin/" target="_blank">
                      <img src="../assets/images/gui.jpeg" alt="桂林" width="100%">
                    </a>
                  </div>
                  <div class="text">
                    <div class="cover"></div>
                    <p>
                      <span class="title">桂林</span>
                      <span class="english">Guilin</span>
                      <span class="subtitle">桂林山水 富甲天下</span>
                    </p>
                  </div>
                </li>-->
                <!-- <li class="J_blocklink big">
                                    <div class="pic">
                                        <a href="http://www.liantu.cn/daoyou/xianggang/" target="_blank"> <img
                                                src="images/201511021402117369.jpeg" alt="香港" width="100%" /> </a>
                                    </div>
                                    <div class="text">
                                        <div class="cover"></div>
                                        <p> <span class="title">香港</span> <span class="english">Xianggang</span> <span
                                                class="subtitle">华洋交错 东方明珠</span> </p>
                                    </div>
                </li>-->
              </ul>
            </div>
          </div>

          <div class="module mod-destination" id="abroad">
            <div class="hd">
              <span class="title">国外城市</span>
              <span class="subtitle">Foreign City</span>
            </div>
            <div class="bd">
              <ul>
                <li
                  class="J_blocklink"
                  v-for="item in abroadList"
                  :key="item.sceneryId"
                  @click="getDetail(item.sceneryId)"
                >
                  <div class="pic">
                    <a>
                      <img
                        :src="item.sceneryCover"
                        :alt="item.sceneryCity"
                        width="height:258px;100%"
                      >
                    </a>
                  </div>
                  <div class="text">
                    <div class="cover"></div>
                    <p>
                      <span class="title">{{item.sceneryCity}}</span>
                      <span class="english">Beijing</span>
                      <span class="subtitle">{{item.sceneryTitle}}</span>
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <div class="module mod-travel" id="travel">
            <div class="hd">
              <span class="title">最新游记</span>
              <span class="subtitle">Newest Travel Peer</span>
            </div>
            <div class="bd">
              <ul>
                <li
                  class="J_blocklink"
                  v-for="item in travelList"
                  :key="item.id"
                  @click="getTravelInfo(item.travelId)"
                >
                  <div class="pic">
                    <a>
                      <img :src="item.travelCover">
                    </a>
                  </div>
                  <div class="text">
                    <div class="avatar">
                      <img src="http://javawebs.cn/travel/images/1.png" alt="你是白痴吗">
                      <span>{{item.travelTitle}}</span>
                    </div>
                    <p>{{item.createTime}}</p>
                  </div>
                </li>
                <!-- <li class="J_blocklink">
                  <div class="pic">
                    <a href="http://www.liantu.cn/tongyou/3.html" target="_blank">
                      <img
                        src="../assets/images/201507211603182952.png"
                        alt="绍兴出发 8月13日 拉萨 7日游 求结伴"
                      >
                    </a>
                  </div>
                  <div class="text">
                    <div class="avatar">
                      <img src="../assets/images/1.png" alt="你是白痴吗">
                      <span>你是白痴吗</span>
                    </div>
                    <p>绍兴出发 8月13日 拉萨 7日游 求结伴</p>
                  </div>
                </li>
                <li class="J_blocklink">
                  <div class="pic">
                    <a href="http://www.liantu.cn/tongyou/1.html" target="_blank">
                      <img
                        src="../assets/images/201507211603301856.png"
                        alt="厦门到丽江旅游 10月01日 5日游 求结伴同游"
                      >
                    </a>
                  </div>
                  <div class="text">
                    <div class="avatar">
                      <img src="../assets/images/1.png" alt="你是白痴吗">
                      <span>你是白痴吗</span>
                    </div>
                    <p>厦门到丽江旅游 10月01日 5日游 求结伴同游</p>
                  </div>
                </li>

                <li class="J_blocklink">
                  <div class="pic">
                    <a href="http://www.liantu.cn/tongyou/1.html" target="_blank">
                      <img
                        src="../assets/images/201507211603301856.png"
                        alt="厦门到丽江旅游 10月01日 5日游 求结伴同游"
                      >
                    </a>
                  </div>
                  <div class="text">
                    <div class="avatar">
                      <img src="../assets/images/1.png" alt="你是白痴吗">
                      <span>你是白痴吗</span>
                    </div>
                    <p>厦门到丽江旅游 10月01日 5日游 求结伴同游</p>
                  </div>
                </li>-->
              </ul>
              <BackTop :height="1000" :bottom="100">
                <div class="top back" style="z-index:99;background:#333;width:50px">
                  <span class="iconfont icon-een"></span>
                </div>
              </BackTop>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value2: 0,
      chinaList: [],
      abroadList: [],
      travelList: []
    };
  },
  created() {
    this.getByType();
    this.getTravelList();
    //console.log(this.$refs.loginShow);
  },
  mounted() {
    document.getElementById("nav").style.visibility = "visible";
  },
  destroyed() {
    //隐藏nav导航栏，但是占位置
    document.getElementById("nav").style.visibility = "hidden";
  },
  methods: {
    getDetail(id) {
      this.$router.push({ path: "/home/detail", query: { id: id } });
    },
    getTravelInfo(id) {
      console.log("travel");
      this.$router.push({ path: "/home/travelDetail", query: { id: id } });
    },
    getByType() {
      this.$axios
        .get("/findByType")
        .then(res => {
          res.data.forEach(item => {
            if (item.sceneryType == "1") {
              this.chinaList.push(item);
            } else {
              this.abroadList.push(item);
            }
          });
          console.log(this.abroadList);
        })
        .catch(err => {});
    },
    getTravelList() {
      this.$axios
        .get("/findAllTravel")
        .then(res => {
          this.travelList = res.data;
        })
        .catch(err => {});
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" >
.back {
  padding: 10px;
  background: rgba(0, 153, 229, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 2px;
}
.demo-carousel img {
  width: 100%;
  height: 100%;
}
.mod-travel .text {
  height: 100px;
  padding: 5px;
}
</style>
